<template>
    <el-container>
      <el-header>
        <h2>购物车</h2>
      </el-header>
      <el-main>
        <el-table :data="cartItems" style="width: 100%">
          <el-table-column prop="name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column label="单价">
            <template #default="scope">
              ¥{{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.quantity"
                :min="1"
                @change="updateTotal(scope.$index)"
                controls-position="right"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计">
            <template #default="scope">
              ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="removeFromCart(scope.$index)" type="text" size="small">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="16" :offset="4">
            <el-button type="primary" @click="checkout">去结算</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  
  export default {
    name: 'Cart',
    setup() {
      const cartItems = ref([
        { name: '玫瑰', price: 50.0, quantity: 1 },
        { name: '百合花', price: 30.0, quantity: 2 },
        { name: '满天星', price: 80.0, quantity: 1 },
      ]);
  
      const updateTotal = (index) => {
        // 这里可以添加逻辑来更新购物车中所有商品的总金额，但在这个例子中我们仅更新小计
        // 因为我们假设总金额是在其他地方计算的
      };
  
      const removeFromCart = (index) => {
        cartItems.value.splice(index, 1);
        ElMessage.success('商品已移除');
      };
  
      const checkout = () => {
        // 跳转到结算页面或显示结算弹窗
        ElMessage.info('正在跳转到结算页面...');
        // 这里应该有一个路由跳转或弹窗逻辑
      };
  
      return {
        cartItems,
        updateTotal,
        removeFromCart,
        checkout,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 这里添加你的样式 */
  body {
    font-family: Arial, sans-serif;
  }
  
  .el-header {
    text-align: center;
    padding: 20px 0;
    background-color: #f5f7fa;
  }
  
  .el-main {
    padding: 20px;
  }
  
  .el-table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .el-table th, .el-table td {
    text-align: left;
    padding: 12px 0;
  }
  
  .el-row {
    margin-top: 20px;
    text-align: center;
  }
  
  .el-button {
    padding: 10px 20px;
    font-size: 16px;
  }
  </style>